<template>
  <div class="log">
    <div class="table_content">
      <el-table :data="baseLogData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" width="50" />
        <!-- 产品编号 -->
        <el-table-column prop="realname" label="访问人真实姓名" align="center" />
        <!-- 名称 -->
        <el-table-column prop="method" label="访问方式" align="center" />
        <!-- 名称 -->
        <el-table-column prop="content" label="访问路径" align="left" />

        <!-- 价格 -->
        <el-table-column prop="logTime" label="访问时间" align="center">
          <template slot-scope="scope">
            <span>{{
              moment(scope.row.applyTime).format("YYYY-MM-DD HH:mm:SS")
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from '@/utils/request'
// 引入vuex的辅助函数
import { mapActions, mapState } from 'vuex'
const moment = require('moment')
export default {
  data() {
    return {
      baseLogData: [],
      // 产品名称-输入
      baseLogName: '',
      // 产品状态-下拉选择
      baseLogStatus: '',
      // 产品栏目-下拉选择
      baseLogCategory: '',
      // 当前的页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 5,
      // 页面展示数据的总条数
      total: 10
      // 定一个查询的参数
    }
  },
  computed: {
    // 使用辅助函数
    ...mapState('category', ['categoryData'])
  },
  methods: {
    moment,
    ...mapActions('category', ['getAllCategoryData']),
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getAllbaseLogData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAllbaseLogData()
    },
    async getAllbaseLogData() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      // queryData 和 data 结合成一个对象呢？
      // console.log({...data, ...this.queryData});
      // 通过对应的参数发送网络请求 获取产品数组数据
      const res = await get('/baseLog/pageQuery', { ...data, ...this.queryData })
      // 将data中的产品数组 进行赋值
      this.baseLogData = res.data.list
      // 页面总数据条数 赋值
      this.total = res.data.total
    }
  },
  created() {
    this.getAllbaseLogData()
  },
  mounted() {}
}
</script>
<style scoped>
/* 分页区域的样式 */
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>
